<template>
	<view class="container">
		<navbar background="transparent" color="#fff"></navbar>
		<view class="bg">
			<image src='../static/bg.png'></image>
		</view>
		<view class="wrap" :style="{marginTop:wrapOffsetTop+'px',height:'calc(100% - ' + bgH + 'px)'}">
			<scroll-view class="scroll-wrap" scroll-y scroll-with-animation>
				<template v-if='showPage'>
					<view class="coupon-wrap" v-if='list.length > 0'>
						<view class="coupon-item" v-for="(item,index) in list" :key="index">
							<image src='../static/coupon-bg.png'></image>
							<view class="coupon-item-con">
								<view class="coupon-item-left line-center">
									<view class="coupon-item-left-con">{{item.reduce_price}}<text>元</text></view>
								</view>
								<view class="coupon-item-center">
									<view class="title">{{item.name}}</view>
									<view class="tip">满{{item.min_price}}元可以用</view>
									<view class="tip" v-if='item.expire_type == 20'>{{item.start_time}}-{{item.end_time}}</view>
									<view class="tip" v-if='item.expire_type == 10'>有限期：{{item.expire_day}}天</view>
								</view>
								<button class="btn line-center" @tap='receiveCoupon(index)' v-if='!item.is_receive'>立即领</button>
								<button class="btn line-center" v-else>已领取</button>
							</view>
						</view>
					</view>
					<view v-else>
						<no-data></no-data>
					</view>
				</template>
				
			</scroll-view>
		</view>
		<view class="modal" :class="[showModal ? 'modal-show':'']">
			<view class="get-modal">
				<view class="get-success-icon">
					<image src='../static/success.png'></image>
				</view>
				<view class="text">领取成功</view>
				<view class="btn line-center" @tap='close'>我知道了</view>
				<view class="close" @tap='close'>
					<uni-icons type="close" color="#DEDBDB" size="24"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				wrapOffsetTop:0,
				bgH:0,
				showModal:false,
				list:[],
				showPage:false,
			};
		},
		onLoad(){
			this.bgH = uni.upx2px(378);
			this.wrapOffsetTop = this.bgH - app.globalData.headAllHeight;
			this.getCoupon()
		},
		onPullDownRefresh() {
			this.list = [];
			this.getCoupon();
			uni.stopPullDownRefresh()
		},
		methods:{
			getCoupon(){
				app.globalRequest({
					api: app.getApi().coupon.couponList,
				}).then(res => {
					this.showPage = true;
					if (res.code == 0) {
						res.data.forEach(v=>{
							v.reduce_price = parseInt(v.reduce_price)
						})
						this.list = res.data
					}
				})
			},
			receiveCoupon(index){
				const list = this.list
				app.globalRequest({
					api: app.getApi().coupon.userSaveCoupon,
					method:"POST",
					data:{
						coupon_id:list[index].coupon_id
					}
				}).then(res => {
					if (res.code == 0) {
						list[index].is_receive = true;
						this.list = list;
						this.showModal = true;
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			close(){
				this.showModal = false;
			}
		}
	}
</script>
<style>
	page{
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 100%;
	}
	image{
		width: 100%;
		height: 100%;
	}
	.bg{
		width: 100%;
		height: 378rpx;
		position: absolute;
		top:0;
		left:0;
	}
	.wrap{
		
	}
	.scroll-wrap{
		width: 100%;
		height: 100%;
	}
	.coupon-wrap{
		// margin:0 24rpx;
		padding-top:30rpx;
		padding-bottom: 80rpx;
		.coupon-item{
			width: 700rpx;
			height: 219rpx;
			margin:0 auto 24rpx;
			position: relative;
			image{
				width: 100%;
				height: 100%;
			}
			.coupon-item-con{
				width: 100%;
				height: 100%;
				position: absolute;
				left:0;
				top:0;
				// background: pink;
				display: flex;
				align-items: center;
				.coupon-item-left{
					width: 172rpx;
					// margin:32rpx 0;
					border-right: 2rpx dotted #FF5F32;
					font-size: 72rpx;
					color:#F73A07;
					font-family: 'DIN-BOLD';
					box-sizing: border-box;
					.coupon-item-left-con{
						height: 150rpx;
						line-height: 150rpx;
						margin-top:30rpx;
					}
					text{
						color:#FF4819;
						font-size: 28rpx;
						padding-left:2rpx;
					}
				}
				.coupon-item-center{
					width: 320rpx;
					padding:0 0rpx 0 24rpx;
					box-sizing: border-box;
					.title{
						font-weight: bold;
						font-size: 32rpx;
						color: #060201;
						line-height: 48rpx;
						
					}
					.tip{
						font-size: 24rpx;
						color: #DEDBDB;
						padding-top:10rpx;
					}
				}
				.btn{
					width: 140rpx;
					height: 58rpx;
					background: linear-gradient( 180deg, #FCE4E4 0%, #FFFFFF 12%, #FEEBE8 43%, #FECDC3 87%, #FFD7CE 100%);
					box-shadow: inset 0rpx -6rpx 12rpx 2rpx #FFFFFF;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					border: 1rpx solid #FFFFFF;
					color:#FF4819;
					margin-left:50rpx;
					font-weight: bold;
				}
			}
		}
	}
	.modal{
		width: 100%;
		height: 100%;
		background: rgba(6,2,1,0.4);
		position: fixed;
		left:0;
		top:0;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		visibility: hidden;
		transition: all 0.1s ease-in-out;
	}
	
	.get-modal{
		width: 560rpx;
		height: 554rpx;
		background: linear-gradient( 180deg, #FFF2F2 0%, #FEFAF8 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		position: relative;
		.get-success-icon{
			width: 328rpx;
			height: 217rpx;
			margin:46rpx auto 0;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.text{
			font-size: 48rpx;
			line-height: 44rpx;
			text-align: center;
			padding-top:40rpx;
		}
		.btn{
			width: 320rpx;
			height: 94rpx;
			background: #FF562A;
			border-radius: 48rpx;
			font-size: 32rpx;
			color:#fff;
			margin:66rpx auto 0;
		}
		.close{
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right:20rpx;
			top:20rpx;
		}
	}
	.modal-show {
	    opacity: 1;
	    visibility: visible;
	}

</style>
